<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导出剪映字幕</title>
</head>
<h4>1、使用剪映识别字幕，不会的请自行百度</h4>
<h4>2、双击打开index.html(尽量使用最新版Chrome、Firefox、Edge浏览器)</h4>
<h4>3、点击“选择文件”打开该路径下的draft_content.json文件</h4>
<h4>4、解析成功后，复制字幕</h4>
<h4>路径：C:\Users\Administrator\AppData\Local\JianyingPro\User Data\Projects\com.lveditor.draft\202108091029</h4>
<h4>注意：AppData文件夹是隐藏文件夹，需要显示后才可以看到、选择，具体可以百度“如何显示隐藏文件夹”</h4>
<h4>注意：此文件仅供学习使用，如有任何问题请联系我删除</h4>

<h4>点击这里选择文件</h4>
<input type="file" value="请选择.json文件" accept="application/json" onchange="popFileSelector(this.files)">

<h4 id="status">状态：未选择</h4>

<textarea rows="20" cols="100" id="program"></textarea>

<table></table>
</body>
<script>
  function popFileSelector(files) {
    if (files && files.length > 0) {
      const file = files[0]
      const reader = new FileReader()
      if (typeof FileReader === 'undefined') {
        alert('您的浏览器不支持文件读取,请使用最新版的Chrome浏览器进行此操作！')
        return
      }
      var status = document.getElementById("status");
      var program = document.getElementById("program");
      // 读取文件
      reader.readAsText(file, 'utf-8') // 设置编码格式
      reader.onload = () => { // 读取操作完成
        let str = reader.result;
        console.log(str); // 打印文件文本内容

        status.innerText = "状态：已读取文件，正在解析"
        try {
          const obj = JSON.parse(str)
          const list = obj.materials.texts.map((e) => e.content)
          console.log(list); // 打印解析出的内容
          program.value = list
          status.innerText = "状态：解析成功，请自行复制，再次导入请刷新页面"
          status.style.color = "green"

          for (var i = 0, len = list.length; i < len; i++) {
            var table = document.querySelector('table')
            var tr = document.createElement('tr')
            var text = document.createTextNode(list[i])
            tr.appendChild(text)
            table.appendChild(tr)
          }
          // alert('文件解析成功')
        } catch (error) {
          program.value = ""
          status.innerText = "状态：解析失败，请查看选择的是否是 draft_content.json 文件，再次导入请刷新页面"
          status.style.color = "red"
          alert('文件解析失败')
        }
      }
      reader.onerror = (e) => { // 读取失败
        status.innerText = "状态：文件读取失败，再次导入请刷新页面"
        console.error('文件读取失败:', e)
      }
    } else {
      status.value = "状态：文件读取失败，再次导入请刷新页面"
    }
  }
</script>

</html>